// import backgroundMapping from "./backgroundMapping"

// 背景参数渲染
const actualWidth = window.designWidth;
const actualHeight = window.designHeight;
const leftPanelWidth = 450

const placeGutter = 10
const placeBlockWidth = 200
const placeBlockHeight = 200
const placeRowNum = 3
const placeColNum = 4
const placePanelTop = (actualHeight - (placeBlockHeight * placeColNum + placeGutter * (placeColNum - 1))) / 2
const placePanelLeft = placePanelTop
const placePanelWidth = placePanelLeft * 2 + placeRowNum * placeBlockWidth + placeGutter * (placeRowNum - 1)

const buildMatrix = (x: number, y: number) => {
  const gutter = placeGutter, blockWidth = placeBlockWidth, blockHeight = placeBlockHeight
  const list = []
  for (let ix = 0; ix < x; ix++) {
    for (let iy = 0; iy < y; iy++) {
      list.push({
        x: ix,
        y: iy,
        code: `${ix}-${iy}`,
        left: ix * (blockWidth + gutter),
        top: iy * (blockHeight + gutter),
        rect: new DOMRect(ix * (blockWidth + gutter), iy * (blockHeight + gutter), blockWidth, blockHeight)
      })
    }
  }
  return list
}

export default class {
  // mapping = backgroundMapping

  state = {
    left: leftPanelWidth,
    place: buildMatrix(placeRowNum, placeColNum),
    placeTop: placePanelTop,
    placeLeft: placePanelLeft,
    placeWidth: placePanelWidth,
    right: actualWidth - (leftPanelWidth + placePanelWidth)
  }
}